<template>
    <div class="management-less">
        <el-form :inline="true" :model="formInline" class="demo-form-inline t-a-c" v-if="stepsType == 1">
            <el-form-item label="状态：">
                <el-select v-model="formInline.entity.examinationId" placeholder="全部">
                    <el-option label="全部" :value="null"></el-option>
                    <el-option v-for="(item,index) in selectArr" :key="index" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="studentList">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- <el-row :gutter="40">
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <div class="border-s my-test">
                        <el-table :data="studentArr" style="width: 100%" :border="false" @selection-change="handleSelectionChange">
                            <el-table-column type="selection" width="55"> </el-table-column>
                            <el-table-column prop="name" label="姓名"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="border-s my-test">
                        <el-table :data="kcArr" style="width: 100%" :border="false"  @row-click="clickRow" highlight-current-row>
                            <el-table-column prop="name" label="考场号"></el-table-column>
                            <el-table-column prop="address" label="地点"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="4">
                <div class="grid-content bg-purple">
                    <el-button type="primary" class="shengc" @click="zwList">生成位号</el-button>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content bg-purple">
                    <div class="border-s my-test">
                        <el-table :data="tableData" style="width: 100%" :border="false">
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="seat" label="位号"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row> -->
        <div class="el-transfer-box" v-if="stepsType == 1">
            <template>
                <el-transfer :titles="['待排场考生','已选考生']" v-model="value1" :data="data"></el-transfer>
            </template>
            <el-button class="xiayibu" type="primary" @click="submitKc(1)">下一步</el-button>
        </div>
        <el-row :gutter="40" v-else-if="stepsType == 2">
            <el-col :span="8" :offset="8">
                <div class="grid-content bg-purple">
                    <div class="border-s my-test">
                        <el-table :data="kcArr" style="width: 100%" :border="false"  @row-click="clickRow" highlight-current-row>
                            <el-table-column prop="name" label="考场号"></el-table-column>
                            <el-table-column prop="address" label="地点"></el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="el-transfer-box">
                    <el-button class="xiayibu" type="primary" @click="submitKc(2)">生成</el-button>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="40" v-else>
            <el-col :span="8" :offset="8">
                <div class="grid-content bg-purple">
                    <div class="border-s my-test">
                        <el-table :data="tableData" style="width: 100%" :border="false">
                            <el-table-column prop="name" label="姓名"></el-table-column>
                            <el-table-column prop="seat" label="位号"></el-table-column>
                        </el-table>
                    </div>
                    <div class="el-transfer-box">
                    <el-button class="xiayibu" type="primary" @click="submitKc(3)">返回</el-button>
                </div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import apiHttp from '../../api/index.js'
export default {
    data(){
        return{
            stepsType:1,
            data: [],
            value1: [],
            formInline: {
                entity:{
                    examinationId:'',
                },
                pageable:{
                    current:1,
                    size:10
                },
            },
            tableData:[],
            styleType:'',
            selectArr:[],
            studentArr:[],
            multipleSelection:[],
            kcArr:[],
            sczwh:{
                orderIds:[],
                roomId:''
            }
        }
    },
    mounted(){
        this.selectList()
        this.kaochang()
    },
    methods:{
        // 获取下来列表值
        selectList(){
            apiHttp.apiIndex.listRoom().then(resp=>{
                if(resp.code == 0){
                    this.selectArr = resp.data
                    if(this.selectArr.length > 0){
                        this.formInline.entity.examinationId = this.selectArr[0].id
                        this.studentList()
                    }
                }
            })
        },
        // 允许分配考场的考生列表
        studentList(){
            let self = this
            apiHttp.apiIndex.allotRoomList(this.formInline).then(resp=>{
                if(resp.code == 0){
                    this.studentArr  = resp.data.records
                    resp.data.records.forEach((item,index)=>{
                        self.data.push({
                            key:item.id,
                            label:item.name
                        })
                    })
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 考场列表
        kaochang(){
            apiHttp.apiIndex.examinationRoomAll().then(resp=>{
                if(resp.code == 0){
                    this.kcArr = resp.data
                }
            })
        },
        // 赋值id
        clickRow(data){
            this.sczwh.roomId = data.id
        },
        // 生成座位号
        zwList(){
            this.sczwh.orderIds = []
            for(let i = 0; i < this.value1.length; i++){
                this.sczwh.orderIds.push(this.value1[i])
            }
            apiHttp.apiIndex.generateSeat(this.sczwh).then(resp=>{
                if(resp.code == 0){
                    this.tableData = resp.data
                }else{
                    this.$message.error(resp.message)
                }
            })
        },
        // 下一步选择考场
        submitKc(type){
            if(type == 1){
                if(this.value1.length > 0){
                    this.stepsType = 2
                }else{
                    this.$message({
                        message: '已选考生不能为空',
                        type: 'warning'
                    })
                }
            }else if(type == 2){
                if(this.sczwh.roomId){
                    this.stepsType = 3
                    this.zwList()
                }else{
                    this.$message({
                        message: '请选择考场',
                        type: 'warning'
                    })
                }
            }else{
                this.stepsType = 1
            }
        }
    }
}
</script>

<style lang="less">
.management-less{
    .export-less{
        text-align: left;
        margin-bottom: 15px;
        .jiafei{
            display: block;
            margin-top: 15px;
        }
    }
    .el-transfer-box{
        margin: 0 auto;
        width: 490px;
        .xiayibu{
            margin: 20px auto;
            width: 100px;
            height: 30px;
            display: block;
        }
    }
    .el-button--primary:focus, .el-button--primary:hover{
        background-color: #5d2805;
        border-color: #5d2805;
    }
    .op{
        opacity: 0;
    }
    .shengc{
        margin-top: 60px;
    }
    .el-table th{
        color: #fff;
        background-color: #5d2805;
    }
    .el-table td, .el-table th{
        text-align: center;
        font-size: 16px;
    }
    .rejected{
        .el-dialog__body{
            padding: 25px 25px 10px;
            .el-form-item__label{
                display: none;
            }
            .el-form-item__content{
                margin-left: 0 !important;
            }
        }
        .el-dialog__footer{
            .el-button--primary{
                background-color: #5d2805;
                border-color: #5d2805;
            }
            .el-button--default:hover{
                background-color: #e4d7cf;
                border-color: #e4d7cf;
                color: #5d2805;
            }
        }
        .el-textarea__inner{
            min-height: 100px !important;
        }
    }
}
.el-message-box__message{
    font-size: 18px;
}
</style>
